<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>修改群昵称</title>

    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/yzl.css"/>
</head>
<style media="screen">
  .group_nickname{
    height: 100px;
    width: 80%;
    margin: 0 auto;
  }
    .group_nickname input{
      margin-top: 3rem;
      width: 100%;
      height: 3rem;
      border:1px solid #ccc;
      border-radius: 5px;
      background-color: #fff;
    }
</style>
<body>
<div id="blank" class="header">
    <div v-back.tapmode class="back"></div>
    <span class="title">修改群昵称</span>
</div>
<div id="app" class="main-container">
    <input id="input" v-model="nickname" type="text" placeholder="请输入您的群昵称"
           style="font-size:14px;margin-top:10px;padding-left:15px;width:100%;height:46px;line-height:normal;background-color:white;outline: none;">
    <a class="btn-commit" style="background:#33375E"  v-myclick="updNickname" >提交</a>
</div>
</body>
<script src="../../script/api.js"></script>
<script src="../../script/vue.js"></script>
<script src="../../script/app.js"></script>
<script src="../../script/common.js"></script>
<script src="../../script/url.js"></script>
<script src="../../script/components.js"></script>
<script>

    var vm;
    var user;

    apiready = function () {
        setBSImg();
        new Vue({
            el: '#blank'
        });
        initApp();
        api.parseTapmode();
        addListeners();
    };

    function initApp() {
	  vm = new Vue({
			el: '#app',
			data: {
					nickname: api.pageParam.member_nickname
			},
			methods:{
					updNickname:function () {
              if(!this.nickname.trim()){
                  alert('修改失败:昵称为空');
                  return;
              }
							var data = {
									member_id : getPrefs('member_id'),
									clan_id: api.pageParam.clan_id,
									nickname: this.nickname
							};
							var callback = function (ret,err) {

							};
							pinet.post(URL.updateMemberNickName, data, callback);
              api.sendEvent({
                  name: 'updateClan',
              });
              api.closeWin();
					},
			},
      watch:{
          nickname:function (n, o) {
              this.nameByte = n.replace(/[^\x00-\xff]/g,"xx").length;
              if(this.nameByte > 32){
                  this.nickname = o;
              }
          }
      },
	});
}


    function addListeners() {
        api.addEventListener({
            name: 'viewappear'
        }, function () {
            onPageStart();
        });

        api.addEventListener({
            name: 'viewdisappear'
        }, function (ret, err) {
            onPageEnd();
        });

        api.addEventListener({
            name: 'keyback'
        }, function (ret, err) {
            onPageEnd();
            api.closeWin();
        });
    }

</script>
</html>
